<template>
  <view class="service-container">
     <view class="header">
        <view class="icon">
           <wd-icon name="user-talk" size="54rpx" color="#fff"></wd-icon>
        </view>
        <view class="close" @click="onClose"><wd-icon name="close" size="24rpx" color="#666"></wd-icon></view>
     </view>
     <view class="customer-list">
       <view class="item" v-for="(item,index) in list" :key="index" @click="toLink(item.waiterUrl)">
          <view class="icon">
             <wd-icon name="chat1" size="22px" color="#fff"></wd-icon>
          </view>
          <view class="name">{{item.waiterName}}</view>
          <view class="arrow"><wd-icon name="arrow-right" size="32rpx" color="#cbd5e1"></wd-icon></view>
       </view>
     </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCustomerServiceList } from '@/api/mine';

const emits = defineEmits(['onClose'])
const list = ref([]);

onLoad(async() => {
   const res = await getCustomerServiceList();
    if (res.code !== 200) {
        return;
    }
    list.value = res.data || [];
});


//跳转地址
const toLink = (url) => {
  window.open(url);
};

//关闭服弹窗
const onClose = () => {
  emits('onClose');
};

</script>
<style lang="scss" scoped>
.service-container {
  position: relative;
  width:calc(100vw - 100rpx);
  background: #fff;
  color: #333;
  padding: 0;
  border-radius: 20rpx;
  overflow: hidden;
  .header{
    text-align: center;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 38rpx 40rpx 20rpx;
    position: relative;
    .icon{
      width: 110rpx;
      height: 110rpx;
      margin: 0 auto 24rpx;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 6rpx #667eea33;
    }
    .close{
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        width: 70rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        cursor: pointer;
        transition: all .3s ease;
    }
  }
  .customer-list{
    margin:30rpx;
    .item{
      display: flex;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 30rpx;
      margin-bottom: 30rpx;
      cursor: pointer;
      transition: all .3s ease;
      box-shadow: 0 .53333vw 2.13333vw #0000000a;
      min-height: 140rpx; 
      align-items: center;
      padding: 0 20rpx;
      .icon{
        width: 72rpx;
        height: 72rpx;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24rpx;
        box-shadow: 0 1.06667vw 3.2vw #667eea33;

      }
      .name{
        flex:1;
        font-size: 26rpx;
        font-weight: 600;
        color: #1e293b;
        line-height: 38rpx;
      }
      .arrow{
        width:40rpx;
        margin-left: 10rpx;
      }

    }
  }

}
</style>
